<template>
    <el-input class="tnxel-input-dropdown"
        v-model="model"
        :disabled="disabled"
    >
        <template #append v-if="items?.length">
            <el-dropdown :trigger="trigger" @command="selectItem">
                <span class="el-dropdown-link">
                    <Icon value="ArrowDown"/>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <template v-for="(item, index) of items" :key="index">
                            <el-dropdown-item
                                :command="item[valueName]"
                                :title="item[titleName]"
                            >
                                {{ item[textName] }}
                            </el-dropdown-item>
                        </template>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </template>
    </el-input>
</template>

<script>
import Icon from '../icon/Icon.vue';

export default {
    name: 'TnxelInputDropdown',
    components: {Icon},
    props: {
        modelValue: String,
        items: Array,
        valueName: {
            type: String,
            default: 'value',
        },
        textName: {
            type: String,
            default: 'text',
        },
        titleName: {
            type: String,
            default: 'title',
        },
        trigger: String,
        disabled: Boolean,
    },
    data() {
        return {
            model: this.modelValue,
        };
    },
    watch: {
        model() {
            this.$emit('update:modelValue', this.model);
        },
        modelValue() {
            this.model = this.modelValue;
        },
    },
    methods: {
        selectItem(value) {
            this.model = value;
        },
    }
}
</script>

<style>
</style>
